<template>
  <view class="content">
    <!--    搜索-->
    <view class="search-box">
      <view class="search-icon" v-if="FormData.title.length===0 && !focus">搜索</view>
      <view class="input-box" :class="focus?'input-focus':''" @click="focus=true">
        <view class="input-icon">
          <image :src="image_host+'icon_sousu.png'"></image>
        </view>
        <input v-model="FormData.title" placeholder="请输入话题名称搜索"
               :focus="focus"
               @focus="focus=true"
               @blur="focus=false"></input>
        <view class="clone-icon" v-if="FormData.title.length>0" @click="clone">
          <uni-icons color="#fff" type="closeempty"></uni-icons>
        </view>
      </view>
      <view class="search-button" v-if="FormData.title.length>0" @click="search">搜索</view>
    </view>
    <!--    一级分类-->
    <view class="class" v-if="FormData.title.length===0 && !focus">
      <view :class="classInfo1.index===index?'class-item-hover':''" class="class-item" v-for="(item,index) in classList"
            :key="index" @click="toCircleClass(item,index,1)">
        {{ item.categoryName }}
      </view>
    </view>
    <!--    列表-->
    <view class="list">
      <!--      二级分类-->
      <view class="class-list" v-if="FormData.title.length===0 && !focus">
        <view class="class-item2" :class="classInfo2.index===''?'class-item2-hover':''"
              @click="toCircleClass({id:''},'',2)">
          全部
          <view v-if="classInfo2.index===''" class="class-item2-xian"></view>
        </view>
        <view class="class-item2" :class="classInfo2.index===index?'class-item2-hover':''"
              v-for="(item,index) in classList[classInfo1.index].childCate" :key="index"
              @click="toCircleClass(item,index,2)">{{ item.categoryName }}
          <view v-if="classInfo2.index===index" class="class-item2-xian"></view>
        </view>
      </view>
      <!--      圈子列表-->
      <view class="circle-list">
        <view class="circle-item" v-for="(item,index) in list" :key="index" @click="setCircle(item)">
          <view class="image">
            <image :src="item.thumb"></image>
          </view>
          <view class="circle-info">
            <view class="circle-title">{{ item.title }}</view>
            <view class="circle-desc">{{ item.introduction }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      classList: [],
      classInfo1: {
        id: "",
        index: 0
      },
      classInfo2: {
        id: "",
        index: ""
      },
      FormData: {
        page: 1,
        pageSize: 10,
        contentType: 0,
        title: "",
        pid: '',
        cateId: '',
      },
      list: [],
      total: 0,
      image_host: this.image_host + 'quanzi/',
      focus: false
    };
  },
  onShow() {
    this.getClassList()
  },
  watch: {
    FormData: {
      deep: true,
      handler(newValue) {
        if (newValue.title) {
          uni.setNavigationBarTitle({
            title: '搜索'
          })
        } else {
          uni.setNavigationBarTitle({
            title: '圈子分类'
          })
        }
      }
    },
    focus: function (newValue) {
      if (newValue) {
        this.list = []
      }
    }
  },
  methods: {
    async getClassList() {
      let {data} = await this.$javaCircle.doRequest("get", 'circle/public/getCategoryList', {}, 'json', false)
      this.classList = data.data
      this.classInfo1 = {id: this.classList[0].id, index: 0};
      this.getList()
    },
    toCircleClass(item, index, type = 1) {
      if (type === 1) {
        this.classInfo1 = {id: item.id, index: index}
        this.classInfo2 = {id: '', index: ''}
      } else if (type === 2) {
        this.classInfo2 = {id: item.id, index: index}
      }
      this.FormData.page = 1
      this.getList()
    },
    async getList() {
      let FormData = this.FormData
      if (!FormData.title) {
        FormData.pid = this.classInfo1.id;
        FormData.cateId = this.classInfo2.id;
      } else {
        FormData.pid = '';
        FormData.cateId = '';
      }
      let res = await this.$javaCircle.doRequest("post", 'circle/public/getDiscussList', FormData, 'json', false)
      this.list = (FormData.page === 1 ? [] : this.list).concat(res.data.data.list)
      this.total = res.data.data.total
    },

    search() {
      this.FormData.page = 1;
      this.getList()
    },
    clone() {
      this.FormData.title = '';
      this.FormData.page = 1;
      this.getList();
    },
    setCircle(item) {
      uni.$emit('setCircle', item);
      uni.navigateBack({
        delta: 1
      })
    },
    setFocus() {
      this.focus = true
      console.log(1231231)
    }
  },

}
</script>

<style lang="scss">
page {
  height: 100%;
}

.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.search-box {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30upx;
  display: flex;
  align-items: center;

  .search-icon {
    font-size: 36upx;
    color: #333333;
    font-weight: 600;
    margin-right: 20upx;
  }

  .input-box {
    flex: 1;
    height: 68upx;
    border-radius: 41upx;
    border: 2upx solid #54B174;
    display: flex;
    align-items: center;
    transition: all .3s linear;

    .input-icon {
      width: 50upx;
      height: 50upx;
      margin: 0 18upx 0 30upx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    input {
      flex: 1;
      font-size: 36upx;
    }

    .clone-icon {
      width: 40upx;
      height: 40upx;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #A9BDB4;
      border-radius: 50%;
      margin-right: 30upx;
    }
  }

  .input-focus {
    height: 78upx;
  }

  .search-button {
    width: 140upx;
    height: 78upx;
    background-color: #18B56E;
    color: #fff;
    line-height: 78upx;
    text-align: center;
    font-size: 44upx;
    font-weight: 500;
    margin-left: 20upx;
    border-radius: 8upx;
  }
}

.class {
  width: 100%;
  height: 100upx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);

  .class-item {
    box-sizing: border-box;
    padding: 12upx 28upx;
    color: #333333;
    font-size: 36upx;
    background-color: #F8F8FA;
    border-radius: 34upx;
  }
}

.list {
  flex: 1;
  display: flex;
}

.class-list {
  width: 130upx;
  height: 100%;
  background-color: #F4F4F4;
  overflow: auto;
  line-height: 40upx;

  .class-item2 {
    font-size: 36upx;
    color: #505050;
    text-align: center;
    margin: 0 auto;
    margin-top: 50upx;
    width: 100upx;
    position: relative;
  }
}

.circle-list {
  flex: 1;
  box-sizing: border-box;
  padding: 0 24upx;

  .circle-item {
    width: 100%;
    box-sizing: border-box;
    padding: 24upx 0 30upx 0;
    border-bottom: 1upx solid #D8D8D8;
    display: flex;

    .image {
      width: 140upx;
      height: 140upx;
      border-radius: 8upx;
      overflow: hidden;
      margin-right: 12upx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .circle-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .circle-title {
        font-size: 42upx;
        color: #000000;
        font-weight: 500;
        line-height: 52upx;
      }

      .circle-desc {
        font-size: 38upx;
        color: #666666;
        font-weight: 400;
        //超出部分用省略号显示
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all;
        margin-top: 12upx;

      }
    }
  }
}

.class-item-hover {
  background-color: #54B174 !important;
  color: #fff !important;
}

.class-item2-hover {
  color: #54B174 !important;
}

.class-item2-xian {
  width: 40upx;
  height: 6upx;
  background-color: #54B174;
  border-radius: 3upx;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>
